<template>
  <!-- 饼图模板组件 -->
  <!-- <borderA001> -->
  <component :is="chartBorderComponent[formatData.border]" :color="[formatData.borderColor1, formatData.borderColor2]">
    <div class="show-pie"
      :style="{ padding: formatData.padding, height: '100%', width: '100%', boxSizing: 'border-box' }">
      <div v-menus:right="menus" style="height: 100%;width: 100%;" ref="refchart">
      </div>
    </div>

    <!-- </borderA001> -->
  </component>
  <config ref="refConfig" @propsDataEv="propsDataEv" />
</template>

<script setup>
import { ref, onUnmounted, inject, shallowRef, nextTick, computed, onMounted, onActivated } from 'vue'
import { myScale } from '@/utils/myScale.js'
import { ChartGetDataListPost } from '@/api/chart/index.js'
import config from '@/components/chart/bar/config.vue'
import { chartBorderComponent } from '@/utils/chart.js'

const refConfig = ref(null)
import * as echarts from 'echarts';
const props = defineProps(['data','modelType','modelRow'])

const provideGlobalConfigEv = inject('provideGlobalConfigEv');
const provideModelConfigEv = inject('provideModelConfigEv');

const refchart = ref(null)
var myrefchart = ref(null)
const menus = shallowRef({
  menus: [
    {
      label: "模板配置",
      tip: '修改当前模板配置',
      click: () => {
        console.log('点击显示饼图配置')
        refConfig.value.drawer = true
        refConfig.value.data
        refConfig.value.resetData(props.data)
        return true;
      }
    },
    {
            label: "模块配置",
            tip: '修改当前模块板配置',
            click: () => {
                console.log('点击显示柱形图配置',props)
                provideModelConfigEv(props.modelType,props.modelRow)
                return true;
            }
        },
    {
      label: "全局配置", tip: '修改全局配置', click: () => {
        console.log('点击显示面板配置')
        provideGlobalConfigEv()
        return true;
      }
    }
  ]
})
let timer = null;

onMounted(() => {
  chartInitEv1()
})

onActivated(() => {

})

const formatData = computed(() => {
  return formatDataEv(JSON.parse(JSON.stringify(props.data)))
})

const formatDataEv = (val) => {
  val.config.title.textStyle.fontSize = myScale(val.config.title.textStyle.fontSize)
  val.config.dataZoom[0].endValue = val.pageSize - 1
  val.padding = myScale(val.padding) + 'px'
  val.config.grid.top = myScale(val.config.grid.top)
  val.config.grid.left = myScale(val.config.grid.left)
  val.config.grid.right = myScale(val.config.grid.right)
  val.config.grid.bottom = myScale(val.config.grid.bottom)
  val.config.xAxis.nameTextStyle.fontSize = myScale(val.config.xAxis.nameTextStyle.fontSize)
  val.config.xAxis.axisLabel.fontSize = myScale(val.config.xAxis.axisLabel.fontSize)
  val.config.yAxis.nameTextStyle.fontSize = myScale(val.config.yAxis.nameTextStyle.fontSize)
  val.config.yAxis.axisLabel.fontSize = myScale(val.config.yAxis.axisLabel.fontSize)
  val.config.series[0].label.fontSize = myScale(val.config.series[0].label.fontSize)
  return val
}

const propsDataEv = (val) => {

  console.log('收到修改的内容')
  console.log(val)
  let updateData = formatDataEv(JSON.parse(JSON.stringify(val)))
  console.log('格式化后的数据')
  console.log(updateData)
  Object.assign(props.data, val)
  if (myrefchart) {
    myrefchart.setOption(updateData.config);
  }

}

const chartInitEv1 = async () => {
  await nextTick()
  myrefchart = echarts.init(refchart.value);
  formatData.value.config.yAxis.max = Math.max(...formatData.value.config.series[0].data) + 20
  myrefchart.setOption(formatData.value.config);
  // myChart1.resize();
  window.addEventListener("resize", function () {
    myrefchart.resize();
  });
  startTimerEv()
}


const getDataEv = async () => {
  console.log('柱形图查询数据')
  if (props.data.sql == '') {
    return
  }
  if (props.data.pool == '') {
    return
  }
  if (timer) clearInterval(timer);
  let data = {}
  data.pool = props.data.pool
  data.sql = props.data.sql
  data.components = props.data.components
  try {
    let arr_data = await ChartGetDataListPost(data)
    if (arr_data.status != 200) {
      return
    }
    formatData.value.config.xAxis.data = arr_data.data.result[0]
    formatData.value.config.series[0].data = arr_data.data.result[1]
    formatData.value.config.yAxis.max  = Math.max(...formatData.value.config.series[0].data) + 20
    myrefchart.setOption(formatData.value.config);
    window.addEventListener("resize", function () {
      myrefchart.resize();
    });
  } catch (error) {
    ElMessage.error('面板数据查询接口异常' + error)
  } finally {
    startTimerEv()
  }
}

// 启动定时器
const startTimerEv = () => {
  if (timer) clearInterval(timer);
  // 设置每秒滚动一行
  timer = setInterval(() => {
    let xAxisLength = formatData.value.config.xAxis.data.length
    let xpPages = formatData.value.pageSize
    let startData = formatData.value.config.dataZoom[0]
    console.log(88)
    console.log(startData.endValue,'==',xAxisLength)
    if (xAxisLength <= xpPages) {
      console.log('没有分页--重新加载数据')
      getDataEv()
    } else {
      if (startData.endValue == xAxisLength - 1) {
        startData.endValue = xpPages - 1
        startData.startValue = 0
        console.log('分页完了重新加在数据')
        getDataEv()
      } else {
        startData.endValue = startData.endValue + 1
        startData.startValue = startData.startValue + 1
        console.log(999)
        console.log(startData.endValue)
      }
      myrefchart.setOption({
      dataZoom:[startData]
    })
      myrefchart.resize()
    }
  }, formatData.value.time * 1000)
}

onUnmounted(() => {
  // 组件卸载记得清除计时器
  if (timer) clearInterval(timer);
  timer = null;
})
</script>

<style lang='less' scoped>
.show-pie {
  padding: 15px;
  box-sizing: border-box;
}
</style>